<template>
    <div>
        <List_Page>
            <template #LIST_SEARCH>
                <el-form :model="formData" label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="用户名称">
                                <el-input v-model="formData.userName" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary" @click="gitList()">搜索</el-button>
                            <el-button @click="reset()">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
            <template #LIST_BUT>
                <el-button type="success">添加</el-button>
            </template>
            <template #LIST_TABLE>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="userName" label="用户名称" />
                    <el-table-column prop="position" label="角色" />
                    <el-table-column prop="userPass" label="电话" />
                    <el-table-column prop="address" label="操作" width="180px">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="handleModify(scope.row.id)">修改密码</el-button>
                            <el-button :disabled="scope.row.name == 'admin'" type="danger" size="small"
                                @click="handleDelen(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #LIST_PAGINATION>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </template>
        </List_Page>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
// 调用公共方法
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
const { $config } = proxy
interface RuleForm {
    userName: string
}
const formData = reactive<RuleForm>({
    userName: "",
})
const tableData = ref([])
import axios from 'axios'
// 分页默认值
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
import { ElMessageBox } from 'element-plus'
// 删除
const handleDelen = (id: number) => {

    ElMessageBox.confirm('确认删除?', '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        console.log(id)

    })

}
// 修改密码
const handleModify = (id: number) => {
    console.log(id)
}
// 获取用户列表
const gitList = () => {
    let data = {
        size: pageSize.value,
        page: currentPage.value,
        userName: formData.userName
    }
    axios({
        method: "get",
        params: data,
        url: $config.envUrl + "/userlist/list",
    }).then(res => {
        tableData.value = res.data.data.records,
            total.value = res.data.data.total
    })
}
gitList()
// 分页
const handleSizeChange = (val: number) => {
    console.log(`current page: ${val}`)
    gitList()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    gitList()

}
// 重置
const reset=()=>{
    pageSize.value=10,
    currentPage.value=1,
    formData.userName=""
    gitList()

}

</script>

<style scoped></style>